<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>extends 全局扩展</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>extends 全局扩展</h1>
    <hr>
    <div id="app">
        <p>{{ num }}</p> 
        <p><button @click="add()">add</button></p>
    </div>
    <script>
        var extendsObj = {
            methods:{
                add:function(){
                    console.log("扩展fun"+this.num);
                    this.num++;
                }
            },
            updated:function(){
                console.log("扩展updated"+this.num);
            },
            watch:{
                num:function(newVal,oldVal){
                    console.log("扩展watch"+newVal+"oldVal"+oldVal);
                }
            }
        };
        var addConsole = {
            updated:function(){
                console.log("混入updated"+this.num);
            },
            methods:{
                fuck:function(){
                    this.num = 0;
                    this.price = 0;
                }
            },
            watch:{
                num:function(newVal,oldVal){
                    console.log("混入watch"+newVal)
                }
            }
        };
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add1:function(){
                    console.log("原生methods");
                    this.num++;
                }
            },
            updated:function(){
                console.log("原生updated"+ this.num);
            },
            watch:{
                num:function(newVal,oldVal){
                    console.log("原生watch"+newVal)
                }
            },
            mixins:[addConsole],
            extends:extendsObj
        });
    </script>
</body>
</html>